<%@ page language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <meta charset="utf-8">
    <title>后台管理模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="<%=basePath%>/static/plugins/layui/css/layui.css" media="all" />
    <style>
        body{overflow:hidden;}
        .video_mask{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:90; background-color:rgba(0,0,0,0); }
        .login{ height:260px;width:260px;padding: 20px;background-color:rgba(0,0,0,0.5);border-radius: 4px;position:absolute;left: 50%;top: 40%; margin:-150px 0 0 -150px;z-index:99;}
        .login h1{ text-align:center; color:#fff; font-size:24px; margin-bottom:20px; }
        .form_code{ position:relative; }
        .form_code .code{ position:absolute; right:0; top:0; cursor:pointer; overflow: hidden; height: 38px;}
        .login_btn{ width:100%; }
    </style>
</head>
<body>
<div class="video_mask"></div>
<div class="login">
    <h1>后台管理登录</h1>
    <form class="layui-form" action="<%=basePath%>/login" method="post">
        <div class="layui-form-item">
            <input class="layui-input" name="username" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="password" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
        </div>
        <div class="layui-form-item form_code">
            <input class="layui-input" name="validateCode" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
            <a class="code"><img src="<%=basePath%>jcaptcha" alt="" id="verifyImg" style="width: 100px;vertical-align: middle;" /></a>
        </div>
        <button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
    </form>
</div>
<script type="text/javascript" src="<%=basePath%>/static/plugins/layui/layui.js"></script>
<script>
    layui.config({
        base : "/static/js/"
    }).use(['jquery','form','layer'],function(){
        console.log("layui加载完成");
        window.jQuery = window.$ = layui.jquery;
        $(document).on("click", ".code", function () {
            var _src = '<%=basePath%>jcaptcha?' + Math.floor(Math.random() * 100);
            $('#verifyImg').attr('src', _src);
        });
    });

</script>
</body>